<template>
  <div id="dz_addPeer" class="page in" data-title>
    <div class="container backFFF">
      <header>
        <a @click="$utils.gotopage('','back')" class="pa back"></a>
        <p>添加数据</p>
      </header>

      <div class="addpeer-wrap">
        <div class="flex-wrap-start addPeerModel">
          <span class="col1">机&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型:</span>
          <input type="text" placeholder="请填写机型"  v-model="frm.series_model" />
        </div>

        <div class="flex-wrap-start addPeerModel">
          <span class="col1">公司名称:</span>
          <input type="text" placeholder="请填写公司名称" v-model="frm.company" />
        </div>

        <div class="flex-wrap-between upload">
          <span>图片上传(最多上传5张)</span>
          <!-- <span>1/5</span> -->
        </div>

        
        <div class="uploadImg-wrap flex-wrap-start auto">
            <block v-for="(item, index) in fileList" :key="index" >
              <div class="uploadimg">
                  <img :data-upfile="item" :src="item" alt />
                  <div class="delete" :data-idx="index" @click="handleRemove">X</div>
              </div>
            </block>
            <div class="addImg icon" @click="chooseImage"></div>  
        </div>

        <a href="#" class="btn uploadBtn" @click="submit">提交</a>
      </div>
    </div>
  </div>
</template>


<script>
var mySelf;
export default {
  data() {
    return { 
        frm:{
          series_model:'',
          company:''
        },
        fileurl: '',
        fileList:[],
        name:'upfile' ,
        upblock:5,   
        formData: {},
       
        header: {}
     };
  },beforeCreate() {
			this.$myUtils.isLoginGotoPage();	
		},
  mounted() {
    mySelf = this;
    this.fileurl = this.$myUtils.getbaseurl()+'/Base/upload';
     
  },
  methods: {
    nfupblock: function () {
      if (this.fileList.length>5) {
         
          return uni.showToast({
							title: '最多上传5张图',
							icon:'none',
							duration:300
          });
      }
      ///

    },
     chooseImage() {
        if (this.fileList.length>4) {          
            return uni.showToast({
                title: '最多上传5张图',
                icon:'none',
                duration:800
            });
        }

        uni.chooseImage({
          success: (chooseImageRes) => {
            const tempFilePaths = chooseImageRes.tempFilePaths;
            uni.uploadFile({
              url: this.fileurl,
              name: this.name,
              filePath: tempFilePaths[0],
              formData: this.formData,
              header: this.header,
              success: (uploadFileRes) => {
                  let Requests = JSON.parse(uploadFileRes.data)           
                  mySelf.fileList.push( this.$myUtils.getDomain()+Requests.data) 
                   
              },
              fail: (err) => {
                  console.log(err);
              }

            });

            // uploadTask.onProgressUpdate((res) => {
            //     console.log('上传进度' + res.progress);
            //     console.log('已经上传的数据长度' + res.totalBytesSent);
            //     console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);

            //     // 测试条件，取消上传任务。
            //     if (res.progress > 50) {
            //         uploadTask.abort();
            //     }

            // })
          }
        })
      },
      handleRemove(Ev) {
 
        let index = Ev.currentTarget.dataset.idx - 0 ;
        this.fileList.splice(index , 1);
  
      },
      submit() {
          this.frm.images = this.fileList;
          if (!this.frm.series_model) {
              return this.$options.methods.showToast('请输入机型');
          }
          if (!this.frm.company) {
              return this.$options.methods.showToast('请输入公司名称');
          }
          if (!this.frm.images) {
              return this.$options.methods.showToast('请上传图片');
          }
          this.frm.user_id =  mySelf.$myUtils.getStorage('userId');
          ///
          this.$myUtils.myRequest({
            url: '/Peer/add',
            method:'POST',
            data:this.frm
          }).then(res => {
		 
               if (res.statusCode==200) {
                  if (res.data.status==200) {
                      this.$myUtils.successGotoUrl('/pages/peer/peer');                                          
                  } else {
                       return uni.showToast({
                        title: res.data.msg || '提交失败！',
                        icon:'none',
                        duration:800
                      });
                  }
                
              } else {
                
                  return uni.showToast({
                    title: res.msg || '提交失败！',
                    icon:'none',
                    duration:800
                  });
              }
          })

      },
       showToast(_title) {
          return uni.showToast({
                  title: _title,
                  icon:'none',
                  duration:500
                });
         
      },

     
     

  },
};
</script>


<style lang="scss">
  .upload {
    padding: .3rem;
}

.uploadImg-wrap .addImg {
        width: 77px;
    height: 77px;
    margin-left: 0.3rem;
    margin-top: 0.2rem;
}

.uploadimg{
   position: relative;
}

.uploadimg .delete{

    display: inline-block;
    position: absolute;
    z-index: 999;
    top: 0;
    left: 80%;
    background-color: #f90505;
    width: 0.7rem;
    font-size: 0.2rem;
    text-align: center;
    color: #fff;
}

</style>

